<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Mobile Metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Site Metas -->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>图表绘制</title>

  <!-- slider stylesheet -->
  <link rel="stylesheet" type="text/css" href="../static/css/owl.carousel.min.css" />

  <!-- bootstrap core css -->
  <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" />

  <!-- fonts style -->
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,700&display=swap" rel="stylesheet" />

  <!-- Custom styles for this template -->
  <link href="../static/css/style.css" rel="stylesheet" />
  <!-- responsive style -->
  <link href="../static/css/responsive.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/echarts/5.0.0/echarts.min.js"></script>
</head>





<body>
    <!--放置echarts的图-->
    <div class="row" style="height: 200px">
            <div class="col-md-8">.col-md-8</div>
            <div class="col-md-4"  id="echart01" style="background-color: #fff3cd;">.col-md-4</div>
    </div>


</body>










 <script type="text/javascript" src="../static/js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="../static/js/bootstrap.js"></script>
  <script type="text/javascript" src="../static/js/owl.carousel.min.js">
  </script>
  <script type="text/javascript">
    $(".owl-carousel").owlCarousel({
      loop: true,
      margin: 20,
      nav: true,
      navText: [],
      autoplay: true,
      autoplayHoverPause: true,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 2
        },
        1000: {
          items: 3
        }
      }
    });
  </script>

</html>
<script>
    //实例化对象并配置
    var myecharts = echarts.init(document.getElementById('echart01'))
    //设置echarts属性
    var option = {
    title: {
        text: '科立锐兴当日生产',
        subtext: '比例图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['已完成', '未完成']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: {{ sql_server_results.yiwancheng }}, name: '已完成'},
                {value: {{ sql_server_results.weiwancheng }}, name: '未完成'},

            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
    myecharts.setOption(option)
</script>